import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';

import IconClose from '@svgs/icon_close.svg';

import { useSubscriptionContext } from '../context/SubscriptionContext';
import { CustomerText } from '@/components/CustomerText/customerText';
import { RootState } from '@/stores/store';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

export const CommonHeader: React.FC = () => {
  const { handleClickClose, handleRecoveryPurchaseRecord } = useSubscriptionContext();
  const inset = useSafeAreaInsets();
  const close = useSelector((state: RootState) => state.display.close);

  return (
    <>
      <View style={[styles.content, { top: inset.top }]}>
        <View style={styles.back_icon_wrapper}>
          {!close ? (
            <Pressable
              onPress={handleClickClose}
              hitSlop={{ top: 30, bottom: 50, left: 30, right: 50 }}
              style={styles.back_icon_container}
            >
              <IconClose style={styles.back_icon} />
            </Pressable>
          ) : (
            <View />
          )}
          <Pressable onPress={handleRecoveryPurchaseRecord} hitSlop={{ top: 30, bottom: 30, left: 30, right: 30 }}>
            <View style={styles.restore}>
              <CustomerText style={styles.restore_text}>subscription.right.restore</CustomerText>
            </View>
          </Pressable>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  back_icon_wrapper: {
    marginTop: pxToVh(10),
    marginLeft: pxToVw(16),
    marginRight: pxToVw(19),
    justifyContent: 'space-between',
    flexDirection: 'row',
    // backgroundColor: 'gray',
  },
  restore: {
    borderRadius: pxToVw(20),
    paddingHorizontal: pxToVw(6),
    paddingVertical: pxToVw(4),
    backgroundColor: 'rgba(0,0,0, 0.25)',
  },
  restore_text: {
    fontSize: pxToVh(17),
    color: 'rgba(235, 235, 245, 0.6)',
    lineHeight: pxToVh(22),
  },
  back_icon_container: {
    width: pxToVw(30),
    height: pxToVh(30),
    borderRadius: pxToVh(15),
    backgroundColor: 'rgba(0,0,0, 0.25)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  back_icon: {
    width: pxToVw(30),
    height: pxToVh(30),
  },
  content: {
    position: 'absolute',
    left: pxToVw(0),
    right: pxToVw(0),
    zIndex: 9,
  },
});
